<template>
  <div class="user-address">
    <AddressList
      v-model="chosenAddressId"
      :list="addressList"
      default-tag-text="默认"
      @add="$router.push('/user/address/add')"
      @edit="($event)=>$router.push({path:'/user/address/add',query:{id:$event.id}})"
      @select="selectAddress"
    ></AddressList>
    <div class="none" v-if="addressList.length===0">
      <img src="@/assets/images/none.png" alt="">
    </div>
  </div>
</template>

<script>
import { AddressList } from 'vant'
import { mapState } from 'vuex'
export default {
  name: 'UserAddress',
  components: { AddressList },
  data () {
    return {
      chosenAddressId: '1'
    }
  },
  created () {
    this.$store.dispatch('findAddress')
  },
  computed: {
    ...mapState(['addressList'])
  },
  methods: {
    selectAddress (item) {

    }
  }
}
</script>

<style scoped lang='less'>
.none {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-60%,0);
  img {
    width: 120px;
    height: 120px;
  }
}
.van-address-list {
  padding: 0;
  ::v-deep .van-address-list__bottom {
    background: #f8f8f8;
    height: 60px;
  }
}

::v-deep .van-address-item__edit {
  right: 5px;
}
::v-deep .van-address-item .van-radio__icon .van-icon {
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}
::v-deep .van-address-item .van-radio__icon--checked .van-icon {
  background: #27ba9b;
  border-color: #27ba9b;
}
::v-deep .van-tag--danger {
  background-color: #27ba9b;
  font-size: 12px;
  padding: 1px 8px;
}
::v-deep .van-button--danger {
  background-color: #27ba9b;
  border-color: #27ba9b;
  margin: 10px 0;
  padding-right: 10px;
  padding-left: 10px;
}
</style>
